<template>
  <view :class="theme">
    <view class="m-30">
      <swiper class="br-20 oh" style="height: 290rpx;" indicator-color="rgba(255, 255, 255, 0.5)"
        indicator-active-color="rgba(255, 255, 255, 1)" :indicator-dots="true" :autoplay="true">
        <swiper-item v-for="banner in banners" :key="banner">
          <u-image radius="20" width="100%" height="100%" :src="banner.image" />
        </swiper-item>
      </swiper>

      <view class="mt-30 fd-row flex-wrap bg-3">
        <view v-for="item in goods.list" :key="item.id" style="width: calc(50% - 20rpx); margin: 0 10rpx 30rpx;"
          class="bg-2 br-10 oh">
          <u-image width="100%" height="340" :src="item.goods_image" />
          <view class="p-18">
            <text class="fs-28 color-3 ellipsis">{{ item.goods_name }}</text>
            <text class="mt-16 color-15">
              <text class="fw-700 fs-32">{{ item.goods_price }}</text>
              <text class="ml-4">星核</text>
            </text>
            <button @click="exchange(item.id)" hover-class="tap-hover" class="bg-6 br-12 color-2 fs-30 fw-600 m-30 lh-60"
              style="margin: 30rpx 12rpx 0;">兑换</button>
          </view>
        </view>
      </view>

      <view class="mt-30 mb-30 ai-center">
        <u-image v-if="!goods.list.length" :showLoading="false" width="400" height="400" class="mt-60 mb-30"
          src="/static/img/blank.png" mode="aspectFit" />
        <u-loadmore :status="goods.status" />
      </view>
    </view>

    <u-popup v-model="showPopup.password" @input="changePopup($event, 'password')" mode="center" closeable
      :mask-close-able="false" close-icon-color="#333">
      <view class="bg-2 oh br-20" style="width: 90vw;">
        <view class="mt-30 ai-center">
          <text class="mt-16 mb-30 color-6 fs-32 fw-700">请输入支付密码</text>
          <u-message-input @change="inputPayPassword" @finish="exchange" focus width="80" :maxlength="6" space="5"
            dot-fill />
        </view>
        <view @click="uniNavigator({ url: `/pages/client/main/setPayPassword` })" hover-class="tap-hover"
          class="mt-10 mb-30 p-20 as-center ml-12 color-15" style="text-decoration: underline;">
          忘记支付密码？
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script lang="ts" setup>
import { useMapState } from "@/common/libs/store";
import { uniNavigator } from "@/common/libs/utils";
import { onLoad, onTabItemTap } from "@dcloudio/uni-app";
import { ref, reactive } from "vue";

const { theme } = useMapState(["theme"]);
const banners = ref<AnyObject[]>([
  {
    image: "/static/img/nft/banner-1.png"
  },
  {
    image: "/static/img/nft/banner-2.png"
  },
  {
    image: "/static/img/nft/banner-3.png"
  },
]);

const goods = reactive({
  current: 1,
  status: "nomore",
  list: [] as AnyObject[]
});

const showPopup = reactive({
  password: false
});
const payPassword = ref("");

onTabItemTap((e) => {
  uni.setTabBarStyle({
    backgroundColor: "#ffffff",
    borderStyle: "white",
  });
});

onLoad(() => {
  uni.request({
    url: "/nftInfo",
    success({ data }: any) {
      if (!Array.isArray(data)) return;
      goods.list = data;
    }
  });
});

const changePopup = (e: boolean, popupKey: keyof typeof showPopup) => {
  showPopup[popupKey] = e;
}

const exchange = (id?: number) => {
  if (!showPopup.password) {
    goods.current = id!;
    showPopup.password = true;
    return;
  }

  uni.request({
    url: "/paymentInfo",
    data: {
      channel: 3,
      order_type: 5,
      pay_pass: payPassword.value,
      goods_id: goods.current,
    },
    success() {
      uni.showToast({ title: "兑换成功" });
    }
  });
  showPopup.password = false;
}

const inputPayPassword = (val: string) => {
  payPassword.value = val;
}

</script>

<style lang="scss" scoped>
// scss
</style>